<template>
  <!-- 根元素.模块名-container -->
  <div class="department-container">
    <!-- 子元素以app-contaienr作为通用布局类名 -->
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
          <span>
            <!-- card title  具名插槽-->
            <!-- 用一个行列布局 -->
            <el-row>
              <el-col :span="20">
                <span>江苏传智播客教育科技股份有限公司</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>负责人</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <!-- 添加顶级部门 -->
                        <el-dropdown-item @click.native="addDept()">
                          添加子部门
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </span>
        </template>
        <!-- card body 默认插槽 -->
        <el-tree
          :data="deptList"
          :props="defaultProps"
          default-expand-all
          @node-click="handleNodeClick"
        >
          <template #default="{ data }">
            <el-row style="width: 100%">
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="addDept(data, 'add')">
                          添加子部门
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="addDept(data, 'edit')">
                          编辑部门
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="delDept(data)">
                          删除部门
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
    <AddDept
      ref="addDeptVue"
      :show-dialog="showDialog"
      :curr-dept="currDept"
      :all-depts="allDepts"
      @close-dialog="showDialog = $event"
      @regetDepartments="getDepartments"
    ></AddDept>
  </div>
</template>

<script>
import { getDepartments, delDepartments } from '@/api/departments'
import { tranListToTreeDate } from '@/utils/index.js'
import AddDept from './components/add-dept.vue'
export default {
  name: 'DepartmentsIndex',
  components: {
    AddDept
  },
  data () {
    return {
      // 全部部门数据
      allDepts: [],
      // 当前部门数据
      currDept: null,
      // 控制dialog弹出层
      showDialog: false,
      //  公司信息
      company: { name: '', manager: '' },
      // 组织架构
      deptList: [{
        name: '财务部',
        children: [{
          name: '财务核算部'
        },
        {
          name: '税务核算部'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    this.getDepartments()
  },
  methods: {
    // 获取组织架构方法
    async getDepartments () {
      const { companyName, depts } = await getDepartments()
      this.company.name = companyName
      // this.deptList = depts
      // 把组织架构信息转换为树形组件信息
      this.deptList = tranListToTreeDate(depts)
      // console.table(tranListToTreeDate(depts))
      // 全部部门数据存好===> 1.可用于效验code的唯一性
      this.allDepts = depts
    },
    /**
     * 添加部门
     * 1.添加父部门没参数
     * 2.添加子部门有当前部门的参数
     */
    addDept (curr, flag) {
      // console.log('当前行 作用域插槽参数', curr)
      this.currDept = curr
      if (flag === 'edit') {
        console.log(1)
        // 点击了编辑按钮
        // 通过ref获取子部件实例调用子组件获取部门详情的方法===>渲染到页面 在编辑页数据回显
        this.$refs.addDeptVue.getDepartDetail(this.currDept.id)
      }
      this.showDialog = true
    },
    /**
     * 删除部门
     * 1.给出确认删除框
     * 2.如果删除的部门还有子部门则不能直接删除===>给出提示框
     * 3.传入部门id调用接口进行删除
     */
    async delDept (dept) {
      console.log('要删除的部门信息', dept)
      try {
        await this.$confirm(`是否确认删除${dept.name}?`, '温馨提示')
        // 判断有没有子部门===>看有没有children的属性  并且数组长度大于0才能删除
        if (dept.children && dept.children.length > 0) {
          return this.$message.error('不能直接删除父部门!')
        }
        // 调用接口删除父部门
        await delDepartments(dept.id)
        // 删除成功刷新页面数据===>重新获取后台信息
        this.getDepartments()
        // 成功提示
        this.$message.success('删除部门成功喽!!!')
      } catch (error) {
        //  点击取消按钮===>提示
        this.$message({
          message: '已取消删除',
          type: 'warning'
        })
      }
    },
    handleNodeClick (data) {
      // console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node__content {
  margin: 3px 0;
  font-size: 14px;
  color: skyblue;
}
</style>
